<!--
 * @Author: coocase
 * @Date: 2021-03-12 11:41:40
 * @LastEditTime: 2021-04-17 19:55:34
 * @LastEditors: coocase
 * @Description: 订单管理
 * @FilePath: \git\dami\src\pages\account\orderManager.vue
-->
<template>
  <div>
    <pageHeader :menuName="menu"></pageHeader>
    <Table border :columns="columns" :data="this.pages.pageData">
      <!-- 在 columns 的某列声明 slot 后，就可以在 Table 的 slot 中使用 slot-scope。
        slot-scope 的参数有 3 个：当前行数据 row，当前列数据 column，当前行序号 index。 -->
      <template slot-scope="{ row }" slot="id">
        <strong>{{ row.id }}</strong>
      </template>
      <template slot-scope="{ index }" slot="action">
        <Button type="error" size="small" @click="remove(index)">Delete</Button>
      </template>
    </Table>
    <!-- <Page :total="pages.pageTotal" :page-size="pages.pageSize" @on-change="pageChange" :current="pages.pageNum"/> -->
  </div>
</template>

<script>
import PageHeader from "./pageHeader";
export default {
  name: "Order",
  props: ["datas"],
  data: function () {
    return {
      menu: "orderManager",
      columns: [
        {
          title: "订单号",
          key: "code",
        },
        {
          title: "购买时间",
          key: "upTime",
        },
        {
          title: "商品名称",
          key: "name",
        },
        {
          title: "联系人",
          key: "user",
        },
        {
          title: "联系电话",
          key: "phone",
        },

        {
          title: "订单金额",
          key: "minPrice",
          //   width: "100px",
        },
      ],
      //初始化页码信息
      pages: {
        pageNum: 1,
        pageTotal: 10,
        pageSize: 5,
        pageData: [
          // {
          //   id: "1111111111",
          //   date: "2019-01-01",
          //   name: "商品名称",
          //   user: "12312",
          //   phone: "123123123",
          //   minPrice: 1111,
          // },
        ],
      },
      initialized: false,
    };
  },
  components: {
    PageHeader,
  },
  methods: {
    show(index) {
      this.$Modal.info({
        title: "User Info",
        content: `Name：${this.pageData[index].name}<br>PhoneNumber：${this.pageData[index].phoneNumber}<br>Id：${this.pageData[index].id}`,
      });
    },

    remove(index) {
      // this.pages.pageData.splice(index, 1);
    },
    // //获得后台信息并初始化
    // pageInit(){
    //     //接受数据 处理
    //     var _pages = this.pages;
    //     var _datas = this.datas;
    //     _pages.pageNum = 1;
    //     _pages.pageTotal = _datas.length*5,
    //     // Array.from()  将一个类数组对象或者可遍历对象转换成一个真正的数组
    //     _pages.pageData = Array.from(_datas[0].datas);
    //     //处理后的数据赋值回去
    //     this.pages = _pages;
    //     this.initialized = true;

    // },
    //页码改变后信息改变
    pageChange(i) {
      // Array.from()  将一个类数组对象或者可遍历对象转换成一个真正的数组
      //接受数据
      var _pages = this.pages;
      // var _pdatas = this.pages.pageData;
      var _datas = this.datas;

      //获取页面数据 处理
      _pages.pageNum = i;
      _pages.pageSize = _datas[i - 1].datas.length;
      _pdatas = Array.from(_datas[i - 1].datas);
      //计算每一页的金额
      for (var j = 0; j < _datas[i - 1].datas.length; j++) {
        _pdatas[j].totalPrice = _pdatas[j].count * _pdatas[j].unitPrice;
      }
      //处理后的数据赋值回去
      this.pages = _pages;
      this.pages.pageData = _pdatas;
      this.initialized = true;
    },
  },
  beforeMount: function () {
    //此时的 this.datas 未定义
    //由于每次切换组件时,initialized 就变为false 所以mounted前要初始化一次，但是第一次mounted前datas 还未定义 所以还要判断是否是第一次进入，
    //****************打脸了，原因是获取数据是异步的所以第一次渲染时无数据的*********
  },
  mounted: function () {
    // console.log("订单信息", JSON.parse(localStorage.getItem("order")));
    this.pages.pageData = JSON.parse(localStorage.getItem("order"));
    // console.log("订单信息", this.pages.pageData);
    // if (!this.initialized) {
    //   //分页初始化 即显示第一页
    //   this.pageChange(1);
    // }
    // 此时的 this.datas 未定义，父组件异步传来的值为空，加了 v-if后即可
  },
  beforeUpdate: function () {
    //此时才有this.datas 在此时不能直接调用初始化，因为每次更新前都调用初始化 做一个判断
    //由于异步 所以在这才有数据 在父组件 判断有值在渲染即可
  },
  updated: function () {},
};
</script>

<style>
</style>